{% load staticfiles %}

<div class="modal fade" id="basemap_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    地理底图
                </h4>
            </div>

            <div class="modal-body">
                <div class="row my_row">
                    <div class="col-md-4">
                        <label for="id_type" class="control-label">地图要素：</label>

                        <select name="type" id="id_type" class="form-control map_attr">
                            <option value="">全部</option>
                            <option value="社会经济图类">社会经济图类</option>
                            <option value="自然、资源类">自然、资源类</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="id_projection" class="control-label">地图投影：</label>

                        <select name="projection" id="id_projection" class="form-control map_attr">
                            <option value="">全部</option>
                            <option value="双标准纬线等面积圆锥投影">双标准纬线等面积圆锥投影</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="id_scale" class="control-label">比例尺：</label>

                        <select name="scale" id="id_scale" class="form-control map_attr">
                            <option value="">全部</option>
                            <option value="1：900万">1：900万</option>
                            <option value="1：1600万">1：1600万</option>
                            <option value="1：2000万">1：2000万</option>
                            <option value="1：4000万">1：4000万</option>
                        </select>
                    </div>

                </div>
                <div class="row my_row">
                    <div class="col-md-4">
                        <label for="id_grade" class="control-label">行政级别：</label>

                        <select name="grade" id="id_grade" class="form-control map_attr">
                            <option value="">全部</option>
                            <option value="国家">国家</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label for="id_area" class="control-label">区域范围：</label>

                        <select name="area" id="id_area" class="form-control map_attr">
                            <option value="">全部</option>
                            <option value="中国">中国</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="id_basemap" class="control-label text-danger">底图选择：</label>

                        <select name="area" id="id_basemap_select" class="form-control">
                            {% for basemap in basemap_list %}
                                <option value="{{ basemap.file }}">{{ basemap.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="id_basemap_choose" class="btn btn-primary" data-dismiss="modal">选择</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var basemap_List = {{ basemap_json|safe }};
    $(document).ready(function () {
        $basemap_select=$("#id_basemap_select");
        $(".map_attr").change(function () {
            var scale = $("#id_scale").val().trim();
            var projection = $("#id_projection").val().trim();
            var type = $("#id_type").val().trim();
            var grade = $("#id_grade").val().trim();
            var area = $("#id_area").val().trim();
            var filterList = basemap_List.filter(function (item) {
                return item.fields.scale.includes(scale) && item.fields.projection.includes(projection) && item.fields.type.includes(type) && item.fields.grade.includes(grade) && item.fields.area.includes(area);
            });
            $basemap_select.html("");
            for(var i=0;i<filterList.length;i++)
            {
                var item=Snap.format('<option value={file}>{name}</option>',{file:filterList[i].fields.file,name:filterList[i].fields.name});
                $basemap_select.append(item);
            }
        });
        $("#id_basemap_choose").click(function(){
            var file=$basemap_select.val();
            onloadsvg("/media/"+file, "svg_panel");
            setTimeout("svg_navigator()", 2000);
        });
    });
</script>